<template>
  <!-- v-if="!isShowSeat" -->
  <div class="live_pk_container">
    <div class="inner flex_colm">
      <div class="img_box flex_bt">
        <img class="cur_poi" style="" src="../assets/pk_2.png" alt="" />
        <img
          @click="closeDialog"
          class="cur_poi"
          src="../assets/pk_3.png"
          alt=""
        />
      </div>
      <!-- 邀请列表 -->
      <div class="content_box isShowPKs" v-if="isShowPKs">
        <div class="content_box_inner_list txt_cent">
          <img src="../assets/pk_online_invit.png" alt="" />
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane
              :label="tab.label"
              :name="tab.label"
              v-for="tab in pkTab"
              :key="tab.label"
            >
            </el-tab-pane>
          </el-tabs>
          <div class="onlien_lives bs_bdb">
            <div
              class="item bs_bdb flex_bt"
              v-for="item in store.inviteList"
              :key="item.id"
            >
              <div class="pk_info flex">
                <div class="avatar_img">
                  <img
                    class="bd_radio"
                    :src="item.userinfo.headimgurl"
                    alt=""
                  />
                </div>
                <div class="text bs_bdb">
                  <div class="nickName flex_row">
                    <div class="fs_16">{{ item.userinfo.nickName }}</div>
                    <img
                      style="width: 18px; height: 18px"
                      src="../assets/sex_2.png"
                      alt=""
                    />
                  </div>
                  <div class="record fs_12">
                    <span>本周成绩：</span>
                    <span style="color: #3d9a09"> {{ item.pkscore.win }} </span>
                    胜
                    <span style="color: #dc383b">{{ item.pkscore.lose }}</span
                    >负
                    <span style="color: #62a2f6">{{ item.pkscore.flat }}</span
                    >平
                  </div>
                </div>
              </div>
              <!--   v-if="store.OtherSideInfo?.joinstatus === 1" -->
              <div
                class="pk_btn bs_bdb fs_14 fff cur_poi"
                @click="initPK(item)"
              >
                发起PK
              </div>
              <!-- <div v-else
                class="un_pk_btn pk_btn bs_bdb fs_14 fff"
                @click="initPK(item)"
              >
                发起PK
              </div> -->
            </div>
          </div>
          <div class="follow_lives"></div>
        </div>
      </div>
      <!-- 默认显示 -->
      <div class="content_box flex_colm" v-if="!isShowPKs">
        <div class="item flex_bt">
          <div>
            <img src="../assets/pk_4.png" alt="" />
          </div>
          <div class="item_btn fff fs_12 cur_poi">我的战绩</div>
        </div>
        <div class="item_list cur_poi">
          <div class="vs" @click="intoSeat(1)">
            <img src="../assets/vs_1.png" alt="" />
          </div>
          <div @click="intoSeat(2)" class="vs">
            <img src="../assets/vs_2.png" alt="" />
          </div>
          <div @click="intoSeat(3)" class="vs">
            <img src="../assets/vs_3.png" alt="" />
          </div>
          <div @click="intoSeat(4)" class="vs">
            <img src="../assets/vs_4.png" alt="" />
          </div>
        </div>
        <div class="item3 flex_bt">
          <img src="../assets/pk_5.png" alt="" />
          <div class="item3_right flex cur_poi">
            <img src="../assets/pk_6.png" alt="" />
            <span class="fs_14">刷新</span>
          </div>
        </div>
        <div class="pk_list">
          <div class="pk_item" v-for="i in 3" :key="i">
            <div class="pk_item_inner flex_bt">
              <div class="pk_item_inner_seat">
                <div class="item1" v-for="i in 4" :key="i">
                  <div class="seat_box flex_colm">
                    <div class="img_box_seat bd_radio cur_poi">
                      <img
                        class="bd_radio bs_bdb"
                        src="../assets/pk_seat.png"
                        alt=""
                      />
                      <div class="vs_font txt_cent fff fs_16">vs</div>
                    </div>
                    <div class="bs_bdb txt_cent fs_10 nickName">虚拟以待</div>
                  </div>
                </div>
              </div>
              <div class="pk_item_inner_btn bs_bdb fff fs_12 cur_poi">
                立即参与
              </div>
            </div>
            <!-- 定位title -->
            <img class="title_img" src="../assets/pk_title.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- dialog -->
    <div
      v-show="isModeDialog"
      class="dialog bs_bdb flex_colm txt_cent"
      style="height: 153px; width: 275px"
    >
      <div class="mian">请选择匹配方式</div>
      <div class="foot flex_bt">
        <div class="foot_btn fs_14 bs_bdb">系统匹配</div>
        <div @click="onlineInvit" class="foot_btn fs_14 bs_bdb fff">
          在线邀请
        </div>
      </div>
    </div>
  </div>
  <div class="live_pk_container live_pk_container2" v-if="isShowSeat">
    <div class="inner">
      <div class="img_box flex_bt">
        <img class="cur_poi" style="" src="../assets/pk_2.png" alt="" />
        <img
          @click="closeDialog"
          class="cur_poi"
          src="../assets/pk_3.png"
          alt=""
        />
      </div>
      <div class="title_more_pk" v-if="mappeTitleMode[pkMode]">
        <div class="fs_18 fff">{{ mappeTitleMode[pkMode].title }}</div>
        <div class="fs_10 fff" style="white-space: nowrap">
          {{ mappeTitleMode[pkMode].subTitle }}
        </div>
      </div>
      <div class="content_box pk_box">
        <div class="head_bg flex">
          <div class="item cur_poi" v-for="(item, i) in sortSeatArr" :key="i">
            <el-popover
              :visible="mapperVisible[`myVisible${i + 1}`]"
              :popper-style="popperStyle"
              placement="right"
              trigger="click"
            >
              <!-- v-if="!item?.userinfo" -->
              <div v-if="!item?.userinfo">
                <div
                  @click="toInvite(i + 1, item)"
                  class="popover_box_inner flex cur_poi"
                  style="margin-bottom: 10px"
                >
                  <img
                    class="bd_radio"
                    src="../../public/logo.jpg"
                    style="width: 25px; height: 25px"
                    alt=""
                  />
                  <div style="margin-left: 15px">邀请</div>
                </div>
                <div
                  @click="toRobSeat(i + 1)"
                  class="popover_box_inner flex cur_poi"
                >
                  <img
                    class="bd_radio"
                    src="../../public/logo.jpg"
                    style="width: 25px; height: 25px"
                    alt=""
                  />
                  <div style="margin-left: 15px">占位</div>
                </div>
              </div>
              <div class="" v-else>
                <div
                  @click="toTickOut(i + 1, item)"
                  class="popover_box_inner flex cur_poi"
                >
                  <img
                    class="bd_radio"
                    src="../../public/logo.jpg"
                    style="width: 25px; height: 25px"
                    alt=""
                  />
                  <div style="margin-left: 15px">踢出</div>
                </div>
              </div>
              <template #reference>
                <div
                  @click="clickPopover(i + 1)"
                  class="bd_radio"
                  style="
                    width: 30px;
                    height: 30px;
                    background: #ffffff;
                    margin: auto;
                  "
                >
                  <img
                    class="bd_radio"
                    style="width: 100%; height: 100%"
                    v-if="item?.userinfo"
                    :src="item?.userinfo?.headimgurl"
                    alt=""
                  />
                  <img
                    v-else
                    style="width: 20px; height: 20px; margin-top: 5px"
                    src="../assets/seat_add.png"
                    alt=""
                  />
                </div>
              </template>
            </el-popover>

            <div class="fff fs_10" v-if="item.teamitem">
              {{
                item?.teamitem?.joinstatus === 1
                  ? item?.userinfo?.nickname
                  : "待确认中"
              }}
            </div>
            <div class="fff fs_10" v-else></div>
            <div class="vs_box2" v-if="pkMode === 2 || pkMode === 4">vs</div>
            <div class="vs_box1" v-else>vs</div>
          </div>
        </div>
        <div class="foot_fun flex_bt bs_bdb">
          <div class="foot_fun_item bs_bdb fs_14 cur_poi">退出组队</div>
          <div class="foot_fun_item bs_bdb fs_14 cur_poi" @click="startPK">
            开启PK
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, defineEmits } from "vue";
import { useCounterStore } from "../store";

import { getTokenByRoomId } from "../http";

const { isShowFather,seatFatherArr,inviteToPk } = defineProps(["isShowFather",'seatFatherArr',"inviteToPk"]);
console.log('seatFatherArr-setup:::::',seatFatherArr);

//const emit = defineEmits(["invitedDialog"]);

const store = useCounterStore();
// 被邀请方的对话框显示
const isShowInviteDia = ref(false);
const isModeDialog = ref(false);
const isShowPKs = ref(false);
const isShowSeat = ref(false);
const sortSeatArr = ref([{}, {}, {}]);
const exitStatus = ref(1); // 1 自己退出 2 踢出别人

const inviteStatus = ref(1); //1：在线邀请、抢位 2：邀请他人
const pkModule = ref(1); //1 :1v1, 2:1:2, 3:1v3 ,4:2v2
const activeName = ref("在线主播");
const dialogRef1 = ref("live_pk_container");
const pkMode = ref(1);
const mapperVisible = reactive({
  myVisible1: false,
  myVisible2: false,
  myVisible3: false,
});

const popperStyle = ref({
  width: "20px",
  padding: "5px",
});
const mappeTitleMode = ref({
  1: "",
  2: {
    title: "全民PK 1v2",
    subTitle: "当前为1V2，人员补齐才能开始PK",
  },
  3: {
    title: "多人大乱斗",
    subTitle: "补齐到亲人数开启PK，大乱斗模式三人即可开启PK",
  },
  4: {
    title: "",
    subTitle: "",
  },
});
const startPK = () => {
  let tempVal = sortSeatArr.value
    .map((v) => JSON.stringify(v) !== "{}")
    .reduce((rezult, v) => {
      console.log("rezult", rezult, "v", v);
      return (rezult = rezult && v);
    }, true);
  console.log("tempVal--------------", tempVal);
};

// // 1 被邀请方弹出对话框
// const invitedDialog = async () => {
//   console.log("点击了1同意2拒绝", operationStat);
//   // 发送邀请请求
//   invitedSide(operationStat);
//   // 条件 邀请成功 才调用刷新数据
//   reloadTeamInfoByInvited();
//   // getCreateTeamInfo();
//   // 推流
//   // invitelinkToPK();
// };
const intoSeat = (val) => {
  if (val === 1) {
    pkModule.value = 1;
    isModeDialog.value = !isModeDialog.value;
  } else {
    pkModule.value = val;
    // 创建队伍
    inlinkToPK(val);
    // 刷新队伍的信息
    getTeamInfo(val);
    // 赋值队伍信息
    getCreateTeamInfo();
  }
};
// 1v1
const getCreateTeamInfo = () => {
  // store.createTeamInfo用这个判断似乎有点不妥，待更新。
  if (store.isTakeTeamInfo) {
    console.log('1v1------------------',store.isTakeTeamInfo);
    store.createTeamInfo?.teams?.forEach((v, i) => {
      sortSeatArr.value[i] = v;
    });
    isShowSeat.value = true;
    store.isTakeTeamInfo=false;
  } else {
    setTimeout(() => {
      getCreateTeamInfo();
    }, 500);
  }
};
// 1v2
const getCreateTeamInfo2 = () => {
  console.log('getCreateTeamInfo2---------------------------',store.isTakeTeamInfo);
  if (store.isTakeTeamInfo) {
    console.log('2222222222 1v2 ',store.createTeamInfo);
    store.createTeamInfo?.teams?.forEach((v, i) => {
      sortSeatArr.value[i] = v;
    });
    isShowSeat.value = true;
    isShowPKs.value = false;
    store.isTakeTeamInfo=false;
  } else {
    setTimeout(() => {
      getCreateTeamInfo2();
    }, 500);
  }
};
// watch(
//   () => store.createTeamInfo,
//   (nv) => {
//     console.log("watch-store.createTeamInfo", nv);
//     getCreateTeamInfo();
//   },
//   { deep: true }
// );//
const onlineInvit = () => {
  inlinkToPK();
  getTeamInfo();
  getTeamListInviteBe();
  isShowPKs.value = !isShowPKs.value;
  isModeDialog.value = false;
};
const closeDialog = () => {
  store.isLivePkDialog = false;
  console.log("点击关闭", store.isLivePkDialog);
};
const handleInviteList = (val) => {
  invitOtherLive(val.id, val.uid);
};

// 获取组队列表 {"c":"room","m":"videoonlinerooms","data":{}}
const getTeamListInviteBe = () => {
  if (store.isLine) {
    console.log("----------获取组队列表-------------");
    store.socketOB.socketSendMessage({
      c: "room",
      m: "videoonlinerooms",
      data: {},
    });
  }
};
// 邀请他人
const invitOtherLive = (id, uid) => {
  // {"c":"room","m":"videopkteamup","data":{"status":2,"type":1,"teamid":1586345452,"order":1,"roomid":538521,"targetuid":6585851}}
  if (store.isLine) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "videopkteamup",
      data: {
        status: 2,
        type: 1,
        teamid: store.teamId,
        order: 1,
        roomid: id,
        targetuid: uid,
      },
    });
  }
};

// 获取组队的信息
const getTeamInfo = (type = 1) => {
  if (store.isIntoTeam && store.teamId) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "videoformatteamdata",
      data: {
        type,
        teamid: store?.teamId,
      },
    });
  } else {
    setTimeout(() => {
      getTeamInfo(type);
    }, 300);
  }
};
// 进入pk
const inlinkToPK = (type = 1) => {
  console.log("进入------------------pk");
  if (store.isLine && store.joinRoom) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "videopkteamup",
      data: {
        type,
        status: 1,
        order: 1,
        teamid: "",
      },
    });
  }
};
const pkTab = reactive([
  {
    label: "在线主播",
  },
  {
    label: "关注主播",
  },
]);
// pk-tab 切换事件
const handleClick = (tab, event) => {
  activeName.value = tab.props.name;
  console.log(tab, "------------------------------", event);
};
const clickPopover = (val) => {
  mapperVisible[`myVisible${val}`] = true;
};
// {"c":"room","m":"videopkteamup","data":{"status":2,"type":1,"teamid":1586345452,"order":1,"roomid":538521,"targetuid":6585851}}
const inviteOther = (order = 1, roomid, targetuid) => {
  console.log('邀请的pkModule.value',pkModule.value);
  if (store.teamId) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "videopkteamup",
      data: {
        status: inviteStatus.value,
        type: pkModule.value,
        teamid: store.teamId,
        order,
        roomid, //id
        targetuid, //uid
      },
    });
  }
};
const reloadTeamInfo = () => {
  if (store.sendSucess && store.inviteSucess) {
    console.log("2222222", store.sendSucess, store.inviteSucess);
    //重新刷新 获取队伍的信息
    console.log("reloadTeamInforeloadTeamInforeloadTeamInforeloadTeamInfo");
    getTeamInfo(2);
    isShowSeat.value = true;
    isShowPKs.value = false;
    store.sendSucess = false;
    store.inviteSucess = false;
  } else {
    setTimeout(() => {
      reloadTeamInfo();
    }, 500);
  }
};
const reloadTeamInfo2 = (val) => {
  if (store.isTickSuccess) {
    console.log("----reloadTeamInfo2----------------", store.isTickSuccess);
    getTeamInfo(val);
  } else {
    setTimeout(() => {
      reloadTeamInfo2(val);
    }, 500);
  }
};
// 邀请他人后，重新刷新数据。
const reloadTeamInfo3 = () => {
  console.log(
    "邀请他人后，重新刷新数据-store.sendInviteSucess",
    store.sendInviteSucess
  );
  if (store.sendInviteSucess) {
    getTeamInfo();
    store.sendInviteSucess=false;
  } else {
    setTimeout(() => {
      reloadTeamInfo3();
    }, 500);
  }
};
// 1v2 刷新数据
const reloadTeamInfo4 = () => {
  console.log( store.isTakeTeamInfo ,' 1v2 刷新数据---------------',store.sendInviteSucess);
  if (store.sendInviteSucess) {
    getTeamInfo(2);
    store.sendInviteSucess=false;
  } else {
    setTimeout(() => {
      reloadTeamInfo4();
    }, 500);
  }
};

//状态变了 重新 刷新数据
const reloadTeamInfo5= () => {
  console.log('刷新状态----',store.OtherSideAgree);
  if (store.OtherSideAgree) {
    getTeamInfo(2);

    store.OtherSideAgree=false;
  } else {
    setTimeout(() => {
      reloadTeamInfo5();
    }, 500);
  }
};

let pkObj = {
  myself: {},
  other: {},
};

const getToken = (data) => {
  return new Promise((resolve) => {
    getTokenByRoomId(data).then((res222) => {
      console.log("res222", res222.data);
      resolve(res222.data);
    });
  });
};

//邀请方的逻辑
const linkToPK = async () => {
  if (store.OtherSideAgree) {
    if (store.OtherSideInfo?.joinstatus === 1) {
      console.log("store.OtherSideAgree");
      console.log("linkToPK--------------", store.OtherSideInfo.teams);
      // let myseftToken;
      // let otherToken;
      let obj = {};
      for (let index = 0; index < store.OtherSideInfo.teams.length; index++) {
        let v = store.OtherSideInfo.teams[index];
        // 拿到通道及其token 推流信息
        if (v.captain === 1) {
          obj = await getToken({
            jwt: store.loginer.jwt,
            roomid: v.roomid,
            targetuid: "",
            type: 1,
          });
          pkObj["myself"] = {
            ...obj,
            // ...v,
          };
        } else {
          obj = await getToken({
            jwt: "",
            roomid: v.roomid,
            targetuid: v.uid,
            type: 1,
          });
          pkObj["other"] = {
            ...obj,
            // ...v,
          };
        }
      }
      console.log("邀请方的逻辑", pkObj);
      // pkObj["myself"]["myseftToken"] = myseftToken.data;
      // pkObj["other"]["otherToken"] = otherToken.data;

      inviteToPk(pkObj);
    }
    store.OtherSideAgree = false;
  } else {
    setTimeout(() => {
      linkToPK();
    }, 500);
  }
};

// 邀请方开始发起pk
const initPK = (val) => {
console.log('发起pk-pkMode.value',pkModule.value);
  // 邀请他人
  inviteStatus.value = 2;
  if (pkModule.value === 1) {
    console.log('yyyyyyyyyy');
    pkModule.value = 1;
    // 邀请对方
    inviteOther(2, val.id, val.uid);
    reloadTeamInfo3();
    // 正式Pk
    linkToPK();
    // return;
  }else{

    if (pkModule.value===2) {
      pkModule.value = 2;
      console.log('xxxxxxxxxxx');
      inviteOther(2, val.id, val.uid);
      reloadTeamInfo4();
      // return
      getCreateTeamInfo2();
      // 监听对方同意后根据场景值再次刷新。
      reloadTeamInfo5();
      // 再次赋值新的
      getCreateTeamInfo();
    }
  }

};

const toInvite = (val, item) => {
  console.log("点击了邀请--------------",val,item);
  getTeamListInviteBe();
  isShowSeat.value = false;
  isShowPKs.value = true;
  // inviteOther(2,val)
  mapperVisible[`myVisible${val}`] = false;
  
};
const toRobSeat = (val) => {
  mapperVisible[`myVisible${val}`] = false;
};
const tickTeamObApi = (status = 1, roomid = "") => {
  // {"c":"room","m":"videopkquitteamup","data":{"status":2,"type":1,"teamid":154634343,"roomid":156456}}
  store.socketOB.socketSendMessage({
    c: "room",
    m: "videopkquitteamup",
    data: {
      status, //1代表自己退出且不传roomid 2 代表踢别人出去需要带roomid
      type: 2,
      teamid: store.teamId,
      roomid,
    },
  });
};
const toTickOut = (val, item) => {
  console.log(
    "toTickOut-item-----------------",
    item,
    "roomid",
    item.userinfo.id
  );
  tickTeamObApi(2, item.userinfo.id);
  reloadTeamInfo2(val);
  getCreateTeamInfo();
  mapperVisible[`myVisible${val}`] = false;
};
// {"c":"room","m":"videopkteamuplist","data":{"type":1}} 获取正在组队队伍列表
const getVideopkteamuplist = () => {
  store.socketOB.socketSendMessage({
    c: "room",
    m: "videopkteamuplist",
    data: {
      // type: 2,// 1V1 ...
    },
  });
};
seatFatherArr?.teams?.forEach((v, i) => {
      sortSeatArr.value[i] = v;
    });
onMounted(() => {
  isShowSeat.value=isShowFather;
  // sortSeatArr.value=seatFatherArr.value;
  console.log('isShowFather--------------------------',isShowSeat.value);
  console.log("seatFatherArr============",  seatFatherArr);
});
</script>

<style scoped lang="scss">
.live_pk_container {
  width: 385px;
  height: 615px;
  background-image: url("../assets/pk_bg_1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  bottom: 150px;
  right: 300px;
  padding: 17px;
  box-sizing: border-box;

  .inner {
    width: 100%;
    height: 100%;

    .img_box {
      img {
        width: 29px;
        height: 29px;
      }
    }

    .content_box {
      height: calc(100% - 45px - 30px);
      margin-top: 45px;
      flex: 1;
      background: #ffffff;
      border-radius: 15px;
      padding: 15px;
      box-sizing: border-box;
      // 在线主播的信息列表
      .content_box_inner_list {
        :deep(.el-tabs__content) {
          color: #6b778c;
        }
        :deep(.el-tabs__nav-wrap):after {
          background-color: #ffffff;
        }
        :deep(.el-tabs__active-bar) {
          background-color: #9f3ff4;
        }
        :deep(.el-tabs__nav) {
          width: 100%;
        }
        :deep(.el-tabs__item) {
          flex: 1;
          padding: 0 45px;
          box-sizing: border-box;
        }
        img {
          width: 180px;
          height: 30px;
        }
        // 列表
        .onlien_lives {
          height: 400px;
          overflow: auto;
          padding: 5px;

          .item {
            margin-bottom: 8px;
            box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.3);
            padding: 5px;

            border-radius: 8px;
          }
          .pk_info {
            .avatar_img {
              width: 54px;
              height: 54px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              padding-left: 9px;
              .nickName {
                align-items: center;
                img {
                  margin: 0 7px;
                }
              }
              .record {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                font-style: normal;
              }
            }
          }
          .pk_btn {
            padding: 6px 12px;
            background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
            border-radius: 50px 50px 50px 50px;
          }
          .un_pk_btn {
            background: #aaa !important;
            // opacity: 0.5; /* 设置透明度，使其看起来像是禁用的 */
            // pointer-events: none; /* 禁止鼠标事件，如点击、悬停等 */
            // cursor: not-allowed; /* 更改光标样式，表示不允许操作 */
          }
        }
        // .pk_tabs {
        //   .item {
        //     // padding: ;
        //     flex: 1;
        //     padding: 11px 0 28px;
        //   }
        // }
      }
      // 在线主播的信息
      .item {
        // border: 1px solid red;
        img {
          width: 117px;
          height: 17px;
        }
        .item_btn {
          background: #2179ff;
          padding: 6px 15px;
          box-sizing: border-box;
          border-radius: 25px;
        }
      }
      // 盒子
      .item_list {
        display: flex;
        flex-wrap: wrap;
        padding: 7px 0;
        box-sizing: border-box;
        .vs {
          width: 50%;
          //   background: yellow;
          //   border: 1px solid rgb(129, 45, 224);
          padding: 7.5px;
          box-sizing: border-box;
          img {
            width: 100%;
            height: 63px;
          }
        }
      }
      .item3 {
        img {
          width: 145px;
          height: 17px;
        }
        .item3_right {
          color: #999c9d;
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .pk_list {
        flex: 1;
        overflow: auto;
        margin-top: 15px;

        .pk_item {
          position: relative;
          height: 80px;
          background: pink;
          border-radius: 10px 10px 10px 10px;
          margin: 0 0 15px 0;
          .pk_item_inner {
            padding: 20px 15px 0;
            box-sizing: border-box;
            height: 100%;
            // margin: auto 0;
            align-items: center;
            .pk_item_inner_seat > .item1:last-child {
              .vs_font {
                display: none;
              }
            }
            .pk_item_inner_seat {
              flex: 1;
              display: flex;
              .item1 {
                height: 100%;
                .seat_box {
                  justify-content: center;
                  align-items: center;
                  margin-right: 10px;

                  .img_box_seat {
                    position: relative;
                    padding: 5px;
                    box-sizing: border-box;
                    background: #ffffff;
                    width: 29px;
                    height: 29px;
                    img {
                      width: 20px;
                      height: 20px;
                    }
                  }
                  .vs_font {
                    position: absolute;
                    left: 29px;
                    top: 11px;
                    text-align: center;
                    font-family: YouSheBiaoTiHei;
                    font-style: normal;
                    text-transform: none;
                  }

                  .nickName {
                    padding-top: 5px;
                    width: 43px;
                    overflow: hidden; /* 隐藏溢出的内容 */
                    white-space: nowrap; /* 保持文本在一行内 */
                    text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
                    display: inline-block; /* 使 span 表现得像块级元素 */
                  }
                }
                .vs_font {
                  width: 23px;
                  height: 10px;
                  font-family: YouSheBiaoTiHei;
                  font-size: 16px;
                  color: #ffffff;
                  line-height: 0px;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                }
              }
            }
            .pk_item_inner_btn {
              background: #2179ff;
              padding: 6px 12px;
              box-sizing: border-box;
              border-radius: 25px;
            }
          }
        }
        .title_img {
          width: 100px;
          height: 26px;
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translate(-50%);
        }
      }
    }
  }
  // dialog
  .dialog {
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 39px 26px 18px;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3);
    background: #ffffff;
    .mian {
      flex: 1;
    }
    .foot_btn:first-child {
      padding: 9px 19px;
      background: #dfefff;
      border-radius: 18px 18px 18px 18px;
      color: #219bff;
    }
    .foot_btn:last-child {
      padding: 9px 19px;
      background: radial-gradient(50% 0% at 0% 0%, #219dff 0%, #2161ff 100%);
      border-radius: 18px 18px 18px 18px;
    }
  }
}
.live_pk_container2 {
  background-image: url("../assets/pk_bg_2.png");
  .title_more_pk {
    padding-top: 8.5px;
    box-sizing: border-box;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
  }
  .pk_box {
    // pk
    // pk foot
    .foot_fun {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 384px;
      height: 65px;
      background: #ffffff;
      border-radius: 10px 10px 0 0;
      box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.4);
      padding: 0 50px;
      .foot_fun_item {
        padding: 10px 19px;
        background: #dfefff;
        border-radius: 18px 18px 18px 18px;
        color: #219bff;
      }
      .foot_fun_item:last-child {
        padding: 10px 24px;
        background: #d8d8d8;
        border-radius: 18px 18px 18px 18px;
        color: #888888;
      }
    }
    .head_bg {
      position: absolute;
      top: 65px;
      left: 50%;
      transform: translate(-50%);
      width: 300px;
      height: 57px;
      background-image: url("../assets/all_seat_bg.png");
      background-size: 100% 100%;
      background-position: 50% 50%;
      padding: 25px 20px;
      box-sizing: border-box;

      .item {
        text-align: center;
        flex: 1;
        position: relative;
        // 1v2 1 v more
        .vs_box1,
        .vs_box2 {
          position: absolute;
          left: calc(100% - 10px);
          top: 10%;
          transform: translate(-10%);
          width: 22px;
          color: transparent;
          font-family: vs;
          font-size: 16px;
          // text-shadow: 2px 0px 0px #902273;
          text-shadow: 4px 4px 4px rgba(71, 68, 68, 0.2);
          text-align: center;
          font-style: normal;
          text-transform: none;
          background: linear-gradient(to bottom, #f04788, #5ba9e4);
          -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
          font-weight: normal;
        }
        // 1v2 2v2
        .vs_box2 {
        }
      }
      .item:last-child {
        .vs_box1 {
          display: none;
        }
      }
      .item:nth-last-child(2),
      .item:last-child {
        .vs_box2 {
          border: 1px solid pink;
          display: none;
        }
      }
    }
    // pk
  }
}
</style>
